<script setup lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const SlideOpen = ref<boolean>(true)
const clickToggle = () => {
  router.replace({
    path: route.path,
    query: {
      ...route.query,
      SlideOpen: String(!SlideOpen.value),
    },
  })
}
watch(
  () => route.query?.SlideOpen,
  () => {
    if (!('SlideOpen' in route.query)) {
      SlideOpen.value = true
    } else {
      SlideOpen.value = route.query?.SlideOpen === 'true'
    }
  },
  {
    immediate: true,
  },
)
defineComponent({
  name: 'GlobalStatisticsTemplateLayout',
})
</script>

<template>
  <div class="template-layout" :class="{ showSlide: SlideOpen, hideSlide: !SlideOpen }">
    <div class="template-layout-header">header</div>
    <div class="template-layout-container">
      <div class="template-layout-container-left">
        <button class="template-layout-toggle" @click="clickToggle">toggle {{ SlideOpen }}</button>
        <div class="template-layout-container-left-content">
          <slot name="left"></slot>
        </div>
      </div>
      <div class="template-layout-container-right">
        <div class="template-layout-container-right-content">
          <slot name="right"></slot>
        </div>
      </div>
    </div>
    <div class="template-layout-footer">footer</div>
  </div>
</template>

<style scoped lang="scss">
.template-layout {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .template-layout-header {
    height: 32px;
    min-height: 32px;
    background-color: #0080007a;
  }
  .template-layout-container {
    height: 0;
    flex: 1;
    display: flex;
    justify-content: space-between;

    .template-layout-container-left,
    .template-layout-container-right {
      width: 480px;
      pointer-events: all;
      position: relative;
    }
    .template-layout-toggle {
      position: absolute;
      left: 110%;
      top: 3%;
      background-color: red;
    }
  }
  .template-layout-footer {
    height: 32px;
    min-height: 32px;
    background-color: #0080007a;
  }
}

@keyframes moveLeft {
  from {
    transform: translateX(-100%) scale(0.95);
    opacity: 0;
  }
  70% {
    transform: translateX(5%) skewX(-2deg);
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes moveRight {
  from {
    transform: translateX(100%) scale(0.95);
    opacity: 0;
  }
  70% {
    transform: translateX(-5%) skewX(2deg);
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes moveLeftOut {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(-100%) scale(0.95);
    opacity: 0;
  }
}

@keyframes moveRightOut {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(100%) scale(0.95);
    opacity: 0;
  }
}

@keyframes showLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes showRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes hideLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes hideRight {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

$item-count: 12; // 元素数量
$base-delay: 0.05s; // 基础延迟间隔
.hideSlide {
  .template-layout-container-left {
    animation: hideLeft 0.35s forwards;
  }
  .template-layout-container-right {
    animation: hideRight 0.35s forwards;
  }
  .template-layout-container-left-content {
    @for $i from 1 through $item-count {
      > :deep(div:nth-child(#{$i})) {
        animation: moveLeftOut 0.3s forwards;
        animation-delay: $base-delay * $i; // 每个元素延迟递增
        animation-fill-mode: both; // 保持动画结束状态
      }
    }
  }
  .template-layout-container-right-content {
    @for $i from 1 through $item-count {
      > :deep(div:nth-child(#{$i})) {
        animation: moveRightOut 0.3s forwards;
        animation-delay: $base-delay * $i; // 每个元素延迟递增
        animation-fill-mode: both; // 保持动画结束状态
      }
    }
  }
}
.showSlide {
  .template-layout-container-left {
    animation: showLeft 0.3s forwards;
  }
  .template-layout-container-right {
    animation: showRight 0.3s forwards;
  }
  .template-layout-container-left-content {
    @for $i from 1 through $item-count {
      > :deep(div:nth-child(#{$i})) {
        animation: moveLeft 0.6s forwards;
        animation-delay: $base-delay * $i; // 每个元素延迟递增
        animation-fill-mode: both; // 保持动画结束状态
      }
    }
  }
  .template-layout-container-right-content {
    @for $i from 1 through $item-count {
      > :deep(div:nth-child(#{$i})) {
        animation: moveRight 0.6s forwards;
        animation-delay: $base-delay * $i; // 每个元素延迟递增
        animation-fill-mode: both; // 保持动画结束状态
      }
    }
  }
}
</style>
